<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content{
            color: white;
            font-weight: bold;
        }
        .el-input{
            width: 250px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #2b5c66;
            color: white;line-height: 60px" @back="goBack" content="销售单下单">
    </el-page-header>
    <el-card style="width: 600px;height: 600px;margin: 0 auto" v-if="isCreateSales">
        <el-form ref="form" :model="salesProduct" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="salesProduct.name"></el-input>
            </el-form-item>
            <el-form-item label="商品编号">
                <el-input v-model="salesProduct.number"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="salesProduct.price"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="salesProduct.count"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="createSales()">生成销售单</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-card> <!--显示一个框-->
    <el-card v-else style="width: 1000px;height: 700px;margin: 0 auto" >
        <a style="color: #666">销售单号:{{sales.number}}</a><br>
        <a style="color: #666">客户:{{customer.name}}</a><br>
        <a style="color: #666">联系人:{{customer.contact}}</a>  <a style="color: #666">电话:{{customer.tel}}</a>
    <table style="width: 100%" border="1">
        <tr>
            <th>序号</th><th>商品名称</th><th>商品编号</th><th>价格</th><th>数量</th><th>备注</th>
        </tr>
        <tr >
            <td style="width: 100px">{{s.id}}</td>
            <td><input v-model="s.name" style="height:100%;width: 100%" type="text"></td>
            <td><input v-model="s.number" style="height:100%;width: 100%" type="text"></td>
            <td><input v-model="s.price" style="height:100%;width: 100%" type="text"></td>
            <td><input v-model="s.count" style="height:100%;width: 100%" type="text"></td>
            <td><input style="height:100%;width: 100%" type="text"></td>
        </tr>
    </table>

        <el-button type="primary" @click="insert()">下单</el-button>
    </el-card>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                sales:{number:"xf202210220001"},
                isCreateSales:true,
                buyProduct:{name:"苹果",number:"sg1001"},
                salesProduct:{name:"",number:"",price:"",count:""},
                s: {
                    name:"",
                    number:"",
                    price:"",
                    count:"",
                    note:""
                },
                customer: {name:"上海人文科技公司",contact: "林女士",tel:"13388889999"}
            }
        },
        methods:{
            createSales() {
                v.isCreateSales = false;
                v.s=v.salesProduct;
            },
            insert(){

            },
            goBack(){
                history.back();//返回上一页面
            }
        },
    })
</script>
</html>